import React, { useState, useRef } from "react";
import { PlusOutlined } from "@ant-design/icons";
import { ProTable } from "@ant-design/pro-components";
import { Button } from "antd";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
import style from "./transactionresultquery.module.scss";

export default function TransactionResultQuery() {
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const actionRef = useRef();
  const refData = localStorage.getItem("i18nextLng");

  const columns = [
    {
      title: () => <>{t("form.TransactionNo")}</>,
      // title: "交易编号",
      dataIndex: "applytitle",
      hideInTable: true,
    },
    {
      title: () => <>{t("form.ApplicationNo")}</>,
      // title: "申请单号",
      dataIndex: "sehnqingdnahao",
    },
    {
      title: () => <>{t("form.Systemflow")}</>,
      // title: "系统流水",
      dataIndex: "xitongliushui",
      hideInTable: true,
    },

    {
      title: () => <>{t("form.filingdate")}</>,
      // title: "提交日期",
      dataIndex: "created_at",
      valueType: "dateRange",

      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      disable: true,
      title: () => <>{t("form.TransactionType")}</>,
      // title: "交易类型",
      valueType: "select",
      dataIndex: "jiaoyileixing",
    },

    {
      // title: "完成日期",
      title: () => <>{t("form.Completiondate")}</>,
      dataIndex: "wanhcnagriqi",
      valueType: "dateRange",

      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      title: () => <>{t("form.State")}</>,
      disable: true,
      // title: "状态",
      dataIndex: "state",
      valueType: "select",
    },

    {
      title: () => <>{t("form.Ouraccount")}</>,
      // title: "本方账号",
      dataIndex: "benfangzhanghao",
    },
    {
      title: () => <>{t("form.Oppositeaccount")}</>,
      // title: "对方账号",
      dataIndex: "duifangzanghao",
    },
    {
      title: () => <>{t("form.SubmerchantNo")}</>,
      // title: "子商户号",
      dataIndex: "zishanghuhao",
    },

    {
      title: () => <>{t("form.Ouraccount")}</>,
      disable: true,
      // title: "本方账户",
      dataIndex: "benfnag",
      hideInSearch: true,
    },
    {
      title: () => <>{t("form.Oppositeaccount")}</>,
      disable: true,
      // title: "对方账户",
      dataIndex: "duifang",
      hideInSearch: true,
    },
    {
      title: () => <>{t("form.Salesamount")}</>,
      disable: true,
      // title: "卖出金额",
      dataIndex: "maichu",
      hideInSearch: true,
    },
    {
      disable: true,
      title: () => <>{t("form.Purchaseamount")}</>,
      // title: "买入金额",
      dataIndex: "mairu",
      hideInSearch: true,
    },
    {
      disable: true,
      // title: "购汇方式",
      title: () => <>{t("form.PurchaseWays")}</>,
      dataIndex: "gouhuifangsi",
      hideInSearch: true,
    },
    {
      disable: true,
      // title: "手续费",
      title: () => <>{t("form.ServiceCharge")}</>,
      dataIndex: "sjouxufei",
      hideInSearch: true,
    },

    {
      disable: true,
      // title: "原因说明",
      title: () => <>{t("buttons.explain")}</>,
      dataIndex: "yuanyinshuom",
      hideInSearch: true,
    },
    {
      disable: true,
      // title: "提交时间",
      title: () => <>{t("form.Submittime")}</>,
      dataIndex: "yuanyinshuom",

      hideInSearch: true,
    },
    {
      disable: true,
      // title: "完成时间",
      title: () => <>{t("form.Completetime")}</>,
      dataIndex: "yuanyinshuom",

      hideInSearch: true,
    },

    {
      // title: "操作",
      title: () => <>{t("form.Option")}</>,
      valueType: "option",
      key: "option",
      render: (text, record, _, action) => [
        <a key="editable"> {t("form.Close")}</a>,
      ],
    },
  ];

  return (
    <div className={style.ApplicationResultBoss}>
      <ProTable
        style={{ height: "100%" }}
        scroll={{ x: 1500 }}
        columns={columns}
        actionRef={actionRef}
        cardBordered
        request={async (params = {}, sort, filter) => {
          console.log("params", params, "sort", sort, "filter", filter);

          const data = [
            {
              id: 1,
              shanghao: "11",
              applytitle: "1212121",
            },
            {
              id: 2,
              shanghao: "22",
              maichu: "121312",
            },
            {
              id: 3,
              shanghao: "22",
              maichu: "速度输出",
            },
            {
              id: 4,
              shanghao: "22",
              maichu: "暗杀就此结束进程",
            },
            {
              id: 44,
              shanghao: "22",
              maichu: "暗杀就此结束进程",
            },
            {
              id: 432,
              shanghao: "22",
              maichu: "暗杀就此结束进程",
            },
            {
              id: 42,
              shanghao: "22",
              maichu: "暗杀就此结束进程",
            },
          ];

          return {
            data: data,
          };
        }}
        rowKey="id"
        options={false}
        form={{ labelWrap: true }}
        pagination={{
          pageSize: 10,
          onChange: (page) => console.log(page),
        }}
        search={{
          labelWidth: 90,
          // span: 12,
          optionRender: ({ searchText, resetText }, { form }, dom) => [
            <Button
              key="searchText"
              type="primary"
              onClick={() => {
                form?.submit();
              }}
            >
              {t("buttons.query")}
            </Button>,
            <Button
              key="resetText"
              onClick={() => {
                form?.resetFields();
              }}
            >
              {t("buttons.Reset")}
            </Button>,
          ],
          collapseRender: (collapsed, showCollapseButton) => {
            return collapsed ? (
              <Button
                type="link"
                key="resetText"
                onClick={() => {
                  console.log(
                    "collapsed, showCollapseButton",
                    collapsed,
                    showCollapseButton
                  );
                  setShowFlag(collapsed);
                }}
              >
                {/* 展开 */}
                {t("buttons.Open")}
              </Button>
            ) : (
              <Button
                type="link"
                key="resetText"
                onClick={() => {
                  console.log(
                    "collapsed, showCollapseButton",
                    collapsed,
                    showCollapseButton
                  );
                  setShowFlag(collapsed);
                }}
              >
                {/* 关闭 */}
                {t("buttons.Close")}
              </Button>
            );
          },
        }}
        // headerTitle="高级表格"
        defaultSize="small"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary">
            {/* 导出 */}
            {t("buttons.Export")}
          </Button>,
        ]}
      />
    </div>
  );
}
